<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		.wrap h3 {
			font-size:18px;
			color:#ffffff;
		}
		.wrap p {
			font-size:14px;
			color:#ffffff;
			font-variant-ligatures:common-ligatures
		                                    discretionary-ligatures
		                                    historical-ligatures;
		}
		body {
			min-height:100vh;
			box-sizing:border-box;
			margin:0;
			padding-top:calc(50vh - 6em);
			font:150%/1.6 Baskerville,Palatino,serif;
		}
		body,.wrap::before {
			background:url("http://www.jq22.com/demo/circleMagic201710082042/dest/img/bg.jpg") 0 / cover fixed;
		}
		.wrap {
			position:relative;
			margin:0 auto;
			padding:1em;
			max-width:23em;
			background:hsla(0,0%,100%,.25) border-box;
			overflow:hidden;
			border-radius:.3em;
			box-shadow:0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0,0,0,0.6);
			text-shadow:0 1px 1px hsla(0,0%,100%,.3);
		}
		.wrap::before {
			content:'';
			position:absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			margin:-30px;
			z-index:-1;
			-webkit-filter:blur(20px);
			filter:blur(20px);
		}


		</style>
	</head>
	<body>
		<div class="wrap">
		    <h3>文章标题</h3>
		    <p>这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章这是一篇文章</p>
		</div>
	</body>
</html>
